<template>
  <div>
    <el-dialog
      title="选择位置"
      :visible.sync="show"
      width="50%"
      :before-close="closeDialog"
    >
      <div class="loaction-map">
        <iframe
          id="mapPage"
          width="100%"
          height="100%"
          frameborder="0"
          :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&zoom=17&coord=${baseCoord}&key=V7UBZ-65JKJ-MALFH-K46X2-N33FK-MTF7Y&referer=myapp`"
        />
      </div>
      <div class="location-button-info">
        <el-button type="info" @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="selectLocation()">选取坐标</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 页面存储数据
      show: false,
      baseCoord: '',
      locationInfo: {
        latlng: {
          lat: '',
          lng: ''
        },
        poinname: ''
      }
    }
  },
  created() {
    // dialog信息初始化
    this.createDialogStatus()
    var that = this
    window.addEventListener('message', function(event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data
      if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        // 存储当前选择位置
        that.locationInfo = loc
      }
    }, false)
  },
  methods: {
    // dialog信息初始化
    createDialogStatus() {
      this.show = false
    },
    // 展示dialog
    showDialog(type, locationInfo) {
      if (type === 0) {
        // 无位置，添加
        this.baseCoord = '40.159102,116.815999'
      } else if (type === 1) {
        // 有位置，修改
        this.locationInfo = locationInfo
        this.baseCoord = locationInfo.latlng.lat.concat(',' + locationInfo.latlng.lng)
      }
      this.show = true
    },
    // 选择位置
    selectLocation() {
      var that = this
      if (this.locationInfo.poinname === '') {
        this.$message({
          type: 'warning',
          message: '请选择位置'
        })
      } else {
        that.$emit('setLocation', this.locationInfo)
        // 判断是否输入了分数，删除它
        that.show = false
        that.baseCoord = '40.159102,116.815999'
        that.locationInfo = {
          latlng: {
            lat: '',
            lng: ''
          },
          poinname: ''
        }
      }
    },
    // 关闭dialog
    closeDialog() {
      this.$confirm('是否确定取消', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.show = false
        // 判断是否输入了分数，删除它
        this.baseCoord = '40.159102,116.815999'
        this.locationInfo = {
          latlng: {
            lat: '',
            lng: ''
          },
          poinname: ''
        }
        this.$message({
          type: 'success',
          message: '关闭成功'
        })
      }).catch(() => {})
    }
  }
}
</script>
<style scoped>
.loaction-map{
    margin: 0 auto;
    width: 90%;
    height: 30rem;
}
.location-button-info{
    width: 95%;
    margin-top: 3rem;
    text-align: right;
}
</style>
